import React, { useState, useRef, useCallback, useMemo } from 'react';
import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
import { Calendar, CalendarList, Agenda, LocaleConfig, ExpandableCalendar, CalendarProvider } from 'react-native-calendars';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino';
import { getTheme, themeColor, } from '../mocks/theme';
import { agendaItems, getMarkedDates } from '../mocks/agendaItems';
import { Colors } from 'react-native/Libraries/NewAppScreen';

export function CalendarProviderExample3() {
    const ITEMS: any[] = agendaItems;
    const INITIAL_DATE_ONE = '2022-07-07';
    const INITIAL_DATE_TWO = '2022-07-08';
    const INITIAL_DATE_THREE = '2022-07-09';
    const theme = useRef(getTheme());
    const todayBtnTheme = useRef({
        todayButtonTextColor: themeColor
    });

    const [selectedDate, setSelectedDate] = useState(INITIAL_DATE_ONE);

    const marked = useMemo(() => {
        return {
            [selectedDate]: {
                selected: true,
                disableTouchEvent: true,
                selectedColor: '#5E60CE',
                selectedTextColor: 'white'
            }
        };
    }, [selectedDate]);


    return <ScrollView style={styles.calendar}>

        <Tester>
            <TestSuite name='showTodayButton'>
                <TestCase itShould="test CalendarProvider showTodayButton property with the  disabledOpacity:0.5 ">
                    <CalendarProvider

                        date={ITEMS[1]?.title}
                        showTodayButton
                        // disabledOpacity={0.5}
                        theme={todayBtnTheme.current}
                    >
                        <ExpandableCalendar markedDates={marked} />
                    </CalendarProvider>
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='disabledOpacity'>
                <TestCase itShould="test CalendarProvider disabledOpacity property with the  disabledOpacity:1  ">
                    <CalendarProvider
                       
                        date={ITEMS[1]?.title}
                        showTodayButton
                        disabledOpacity={1}
                        theme={todayBtnTheme.current}
                    >
                        <ExpandableCalendar markedDates={marked} />
                    </CalendarProvider>
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='todayBottomMargin'>
                <TestCase itShould="test CalendarProvider todayBottomMargin property  ">
                    <CalendarProvider

                        date={ITEMS[1]?.title}
                        showTodayButton
                        disabledOpacity={0.1}
                        todayBottomMargin={5}
                        theme={todayBtnTheme.current}
                    >
                        <ExpandableCalendar markedDates={marked} />
                    </CalendarProvider>
                </TestCase>
            </TestSuite>
        </Tester>



       <Tester>
            <TestSuite name='numberOfDays'>
                <TestCase itShould="numberOfDays=3: 显示3天视图">
                    <CalendarProvider
                        date={INITIAL_DATE_ONE}
                        numberOfDays={3}
                        onDateChanged={(date) => {
                            console.log('3天视图 - 当前日期:', date);
                        }}
                    >
                        <View style={{ height: 400 }}>
                            <Text style={{ textAlign: 'center', marginVertical: 10 }}>
                                3天视图 - 显示连续3天
                            </Text>
                            <ExpandableCalendar 
                                markedDates={marked}
                                onDayPress={(day) => {
                                    console.log('选择的日期:', day.dateString);
                                }}
                            />
                        </View>
                    </CalendarProvider>
                </TestCase>

            </TestSuite>
        </Tester>

   
        <Tester>
            <TestSuite name='timelineLeftInset'>
                <TestCase itShould="timelineLeftInset=50: 时间线左侧缩进50">
                    <View style={{ height: 500 }}>
                        <Text style={{ textAlign: 'center', marginVertical: 10, fontWeight: 'bold' }}>
                            时间线左侧缩进: 50
                        </Text>
                        <CalendarProvider
                            date={INITIAL_DATE_ONE}
                            timelineLeftInset={50}
                        >
                            <ExpandableCalendar 
                                markedDates={marked}
                                style={stylesss.calendarContainer}
                            />
                            <View style={stylesss.timelineContainer}>
                                <View style={[stylesss.timelineEvent, { marginLeft: 50 }]}>
                                    <Text style={stylesss.eventText}>09:00 - 会议</Text>
                                </View>
                                <View style={[stylesss.timelineEvent, { marginLeft: 50 }]}>
                                    <Text style={stylesss.eventText}>14:00 - 电话</Text>
                                </View>
                            </View>
                        </CalendarProvider>
                    </View>
                </TestCase>

                <TestCase itShould="timelineLeftInset=100: 时间线左侧缩进100">
                    <View style={{ height: 500 }}>
                        <Text style={{ textAlign: 'center', marginVertical: 10, fontWeight: 'bold' }}>
                            时间线左侧缩进: 100
                        </Text>
                        <CalendarProvider
                            date={INITIAL_DATE_TWO}
                            timelineLeftInset={100}
                        >
                            <ExpandableCalendar 
                                markedDates={marked}
                                style={stylesss.calendarContainer}
                            />
                            <View style={stylesss.timelineContainer}>
                                <View style={[stylesss.timelineEvent, { marginLeft: 100 }]}>
                                    <Text style={stylesss.eventText}>10:30 - 演示</Text>
                                </View>
                                <View style={[stylesss.timelineEvent, { marginLeft: 100 }]}>
                                    <Text style={stylesss.eventText}>16:00 - 培训</Text>
                                </View>
                            </View>
                        </CalendarProvider>
                    </View>
                </TestCase>

                <TestCase itShould="timelineLeftInset=0: 无左侧缩进">
                    <View style={{ height: 500 }}>
                        <Text style={{ textAlign: 'center', marginVertical: 10, fontWeight: 'bold' }}>
                            时间线左侧缩进: 0 (默认)
                        </Text>
                        <CalendarProvider
                            date={INITIAL_DATE_THREE}
                            timelineLeftInset={0}
                        >
                            <ExpandableCalendar 
                                markedDates={marked}
                                style={stylesss.calendarContainer}
                            />
                            <View style={stylesss.timelineContainer}>
                                <View style={[stylesss.timelineEvent, { marginLeft: 0 }]}>
                                    <Text style={stylesss.eventText}>11:00 - 午餐</Text>
                                </View>
                                <View style={[stylesss.timelineEvent, { marginLeft: 0 }]}>
                                    <Text style={stylesss.eventText}>15:00 - 会议</Text>
                                </View>
                            </View>
                        </CalendarProvider>
                    </View>
                </TestCase>
            </TestSuite>
        </Tester>
       


    </ScrollView >
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
    },
    item: {
        width: '100%',
        marginBottom: 20,
        borderColor: 'blue',
        borderWidth: 1,
    },
    itemText: {
        color: 'white',
        fontSize: 12,
    },
    calendar: {
        borderWidth: 1,
        borderColor: '#b6c1cd'

    }
})



const styless = StyleSheet.create({
    calendar: {
        paddingLeft: 20,
        paddingRight: 20
    },
    header: {
        backgroundColor: 'lightgrey'
    },
    section: {
        backgroundColor: Colors.lightThemeColor,
        color: 'grey',
        textTransform: 'capitalize'
    }
});



const stylesss = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
    },
    item: {
        width: '100%',
        marginBottom: 20,
        borderColor: 'blue',
        borderWidth: 1,
    },
    itemText: {
        color: 'white',
        fontSize: 12,
    },
    calendar: {
        borderWidth: 1,
        borderColor: '#b6c1cd'
    },
    calendarContainer: {
        width: '100%',
        backgroundColor: 'white',
        borderRadius: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
        elevation: 2,
        marginHorizontal: 0,
        paddingHorizontal: 0
    },
    compareTitle: {
        textAlign: 'center',
        fontWeight: 'bold',
        marginVertical: 10,
        fontSize: 16,
        color: '#333'
    },
    subTitle: {
        textAlign: 'center',
        fontWeight: '600',
        marginVertical: 8,
        fontSize: 14,
        color: '#555'
    },
    // 时间线相关样式
    timelineContainer: {
        marginTop: 10,
        paddingHorizontal: 10,
    },
    timelineEvent: {
        backgroundColor: '#e3f2fd',
        padding: 10,
        marginVertical: 5,
        borderRadius: 5,
        borderLeftWidth: 3,
        borderLeftColor: '#2196f3',
    },
    eventText: {
        fontSize: 12,
        color: '#1565c0',
        fontWeight: '500',
    }
});
